import { ActionType, DrawerForm, ProFormRadio } from '@ant-design/pro-components';
import { Button, Card, Space, Tag } from 'antd';
import { useEffect, useRef, useState } from 'react';
import DetailReports from './DetailReports';
import { FieldTimeOutlined, FireOutlined } from '@ant-design/icons';
import ProList from '@ant-design/pro-list';
import { reportPage } from '@/services/api/api-interview-record';

const defaultData = [
  {
    id: '1',
    source: '人民日报',//发布站点
    image:
      'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
    contributionTitle: '一带一路系列报道',
    lastVersionTime: '2023-12-12',
    totalSpread: '20',
    docChannel: '记者',//栏目
    themeType: '1',
    likeNum: '156',
    weiboSpread: '343',
    dySpread: '900',
  },
];

interface DetailsTabelReportsProps {
  id: string;
  title: string;
}

const TabelReports: React.FC<DetailsTabelReportsProps> = ({ id, title, }) => {
  const [drawerVisit, setDrawerVisit] = useState(false);
  const [dataSource, setDataSource] = useState<InterviewRecordData.reportDetail>(defaultData);
  const actionRef = useRef<ActionType>();

  const [themeId, setThemeId] = useState();
  const [themeName, setThemeName] = useState();
  const [sortType, setSortType] = useState(1); // 1: 按时间排序, 2: 按热度排序  
  const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });

  // 根据选定的排序方式对数据进行排序  
  const sortedData = () => {
    return [...dataSource].sort((a, b) => {
      if (sortType === 1) {
        return new Date(b.lastVersionTime) - new Date(a.lastVersionTime); // 按时间排序  
      } else {
        return b.totalSpread - a.totalSpread; // 按热度排序  
      }
    });
  };
  // 数据获取  
  const fetchData = async (current, pageSize) => {
    const response = await reportPage({
      keyWords: title,
      current,
      pageSize,
    });
    if (response.code === 0) {
      // setDataSource(defaultData);
      setDataSource(response.data.data);
      setPagination({ current, pageSize, total: response.data.total });
    }
  };
  const handleRedirect = (articleId: string, themeName: string, themeId: string) => {
    console.log(articleId, themeName, themeId);
    const monitorEndTime = "2100-08-01 00:00:00"
    const monitorStartTime = "2000-01-10 23:59:59"
    const firstUrl = "https://moc.ljsyy.net/guangda.html?nav=menu_p4_0&url=https%3A%2F%2Fcbdn-test.ljsyy.net%2Fworkbench%2F%23%2Fhome%2Fquality-estimate%2Fspread-monitor%2Ftheme-monitor-list-relatedrepor"
    const url = `/?backPath=themeMonitorList&id=${themeId}&monitorEndTime=${monitorEndTime}&monitorStartTime=${monitorStartTime}&themeName=${themeName}&articleId=${articleId}`
    window.open(firstUrl + url, "_blank")
    // history.push(urlTest, "_blank")
    // history.push(urlTest)
  }

  // 监听 title 和 pagination 的变化  
  useEffect(() => {
    fetchData(pagination.current, pagination.pageSize);
  }, [title, pagination.current, pagination.pageSize]);
  return (
    <DrawerForm
      onVisibleChange={(visible) => {
        if (visible) {
        } else {
        }
        setDrawerVisit(visible)
      }}
      title="相关报道"
      visible={drawerVisit}
      drawerProps={{
        width: "100%",
      }}
      trigger={<Button type='primary'>相关报道</Button>}

    >
      <div style={{ float: 'right' }}>
        <ProFormRadio.Group
          style={{ alignItems: 'center' }}
          name="type"
          radioType="button"
          initialValue={1}
          options={[
            {
              label: (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <FieldTimeOutlined />
                  <span style={{ marginLeft: 5 }}>时间</span>
                </div>
              ),
              value: 1,
            },
            {
              label: (
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <FireOutlined />
                  <span style={{ marginLeft: 5 }}>热度</span>
                </div>
              ),
              value: 2,
            },
          ]}
          fieldProps={{
            buttonStyle: 'solid',
            style: { marginTop: -30 },
            onChange: (e) => {
              console.log(e.target.value);
              const value = e.target.value
              setSortType(value);
            }
          }}
        />
      </div>
      <ProList<InterviewRecordData.reportPage>
        rowKey="documentId"
        ghost
        bordered
        dataSource={sortedData()}
        showActions="hover"
        editable={{
          onSave: async (key, record, originRow) => {
            console.log(key, record, originRow);
            return true;
          },
        }}
        pagination={{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          onChange: (page, pageSize) => {
            setPagination({ current: page, pageSize });
            fetchData(page, pageSize);
          }
        }}
        metas={{
          title: {
            dataIndex: 'source',
            render: (text, row, index, action) => {
              return <div style={{ display: 'flex' }}>
                <div style={{ width: '80vw', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
                  <a onClick={() => handleRedirect(row.zbGuidChar, row.themeName, row.themeId)}>{row.contributionTitle}</a>
                </div>

              </div>
            },
          },
          // avatar: {
          //   dataIndex: 'image',
          //   editable: false,
          // },
          actions: {
            render: (text, row, index, action) => [

              // <span>{row.lastVersionTime}</span>
            ],
          },
          description: {
            render: (text, row, index, action) => [
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Space size={0} style={{ marginLeft: 5 }}>
                  {row.source && <Tag color="blue">{row.source}</Tag>}
                  {row.docChannel && <Tag color="blue">{row.docChannel}</Tag>}
                  <Tag color="#f50">总传播量 : {row.totalSpread}</Tag>
                </Space>
                <span>{row.lastVersionTime && row.lastVersionTime.slice(0, 11)}</span>
              </div>
            ],
          },
        }}
      />

    </DrawerForm>
  );
};

export default TabelReports;